<template>
  <a-drawer
    :title="title"
    :width="720"
    :visible.sync="visible"
    :body-style="{ paddingBottom: '40px' }"
    :footer-style="{ textAlign: 'right' }"
    @close="onClose"
  >
    <a-form ref="createApiForm" size="small" :model="formData" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="模块" name="moduleId">
            <a-select
              size="small"
              v-model:value="formData.moduleId"
              :options="moduleList"
              :filter-option="filterModuleOption"
              show-search
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="名称" name="name">
            <a-input size="small" placeholder="名称" v-model:value="formData.name" allowClear> </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="路径" name="url">
            <a-input
              size="small"
              v-model:value="formData.url"
              placeholder="路径"
              allowClear
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="响应类型" name="responseType">
            <a-radio-group size="small" v-model:value="formData.responseType">
              <a-radio-button value="1">手动模式</a-radio-button>
              <a-radio-button value="2">Restful模式</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="描述" name="formData.description">
            <a-textarea
              size="small"
              v-model:value="formData.description"
              :rows="4"
              placeholder="please enter url description"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <!-- <template #extra> -->
    <a-space>
      <a-button size="small" @click="onClose">取消</a-button>
      <a-button size="small" type="primary" @click="onSubmit">提交</a-button>
      <a-button
        size="small"
        @click="
          () => {
            this.formData = { ...this.formData, ...this.initForm() }
          }
        "
        >随机</a-button
      >
    </a-space>
    <!-- </template> -->
  </a-drawer>
</template>

<script>
import Mock from 'mockjs2'

import { getList as getModuleList } from '@/api/mock-module'
import { create, update } from '@/api/mock-url'
// 表单字段
const fields = ['id', 'module', 'name', 'responseType', 'id', 'url', 'description']
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    form: {
      type: Object,
      default: () => {},
    },
  },
  mounted() {
    getModuleList({
      current: 1,
      size: Number.MAX_SAFE_INTEGER,
    }).then((res) => {
      this.moduleList = res.records.map((item) => {
        return {
          key: item.id + item.name,
          label: item.name,
          value: item.id,
        }
      })
      console.log(this.moduleList)
    })
  },
  data() {
    return {
      title: '',
      visibleInner: this.visible,
      moduleList: [],
      formData: {},
    }
  },
  created() {},
  watch: {
    visible(val) {
      this.visibleInner = val
    },
    form: {
      handler(newValue) {
        if (newValue && newValue.isEdit) {
          this.formData = { ...newValue }
          this.title = '编辑URL'
        } else {
          this.formData = { ...this.initForm() }
          this.title = '新建URL'
        }
      },
      immediate: true,
    },
  },
  methods: {
    randGen() {
      this.formData = { ...this.initForm() }
    },
    initForm() {
      const randomModule = Mock.mock({
        'array|1': this.moduleList.map((item) => item.value),
      })
      return {
        moduleId: randomModule.array,
        name: Mock.mock('@title'),
        url: '/' + Mock.mock('@word') + '/' + Mock.mock('@word'),
        description: Mock.mock('@sentence'),
        responseType: Mock.mock('@cword("12", 1)'),
      }
    },
    onSubmit() {
      const param = JSON.parse(JSON.stringify(this.formData))
      if (param.id) {
        update(param)
          .then((res) => {
            this.$emit('handle-ok')
          })
          .catch((err) => failmsg(err))
      } else {
        create(param)
          .then((res) => {
            this.$emit('handle-ok')
          })
          .catch((err) => failmsg(err))
      }
    },
    onClose() {
      this.formData = this.initForm()
      this.$emit('handle-cancel')
    },
    filterModuleOption(input, option) {
      return option.data.key.toLowerCase().includes(input.toLowerCase())
    },
  },
}
</script>
